<template>
	<view class="an-body an-user">
		<view class="an-top-bg" style="background: #fbf9fe">
			<nodata v-if="grids.length==0"></nodata>
			<!-- 用户信息 -->
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
			<view class="pB50 bordert1">
			<!-- <view class="an-userInfo p5" v-for="item in grids">
				<view class="an-user-image3 mL10"><image style="width:100%; height:100%; background-color: #eeeeee;" mode="aspectFit" :src="item.vister_personimg | personimg" @error="imageError"></image></view>
				<view class="an-user-text w25">
					<view style="color: black;">
						<h3>{{item.vister_name?item.vister_name:item.nickname}} </h3>
						<p>访客电话：</p>
						<p>到访公司：</p>
						<p>到访部门：</p>
						<p>到访时间：</p>
						<p>到访位置：</p>
						
					</view>
					
				</view>
				<view class="cc-view"> 
					<button v-if="type!='3'" :class="item.appointment_status==0?'cc':'bg_8e8e col_black mR10'">{{item.appointment_status==0?'未访问':'已访问'}}</button>
					<button v-if="type=='3'" class="cc">待审核</button>
					<view class="phone-number">
						{{item.vister_mobile}}
					</view>
					<view class="host-company">
						{{item.app_company_name}}
					</view>
					<view class="host-department">
						{{item.app_address?item.app_address:'暂无'}}
					</view>
					<view class="ontime">
						{{retime(item.app_visittime)}}
					</view>
					<view class="location-visited">
						{{item.app_address}}
					</view>
					<view class="details" @click="details(item)">
						详情
					</view>
				</view>
			</view> -->
			
			
			
			<view class="an-userInfo p10 borderb1" v-for="(item,index) in grids">
			
				<view class="an-user-image3">
					<view class="myheaadurl"><image mode="aspectFill"  :src="item.vister_personimg | personimg" @error="imageError"></view>
					
				
					</image>
				</view>
				
				<view class="an-user-text1">	
					<view style="color: black;">
						<p>访客姓名：{{item.vister_name?item.vister_name:item.app_user_name}}</p>
						<p>访客电话：{{item.vister_mobile?item.vister_mobile:'-'}}</p>						
						<p>到访公司：{{item.app_company_name?item.app_company_name:'-'}}</p>
						<p>到访部门：{{item.app_address?item.app_address:'暂无'}}</p>						
						<p>预约时间：{{retime(item.app_visittime)}}</p>
					</view>
					<view class="cc-view" >
						<button class="cc2" @click="details(item)">查看详情</button>
						<!-- <button class="cc" v-if="checkstatus(index)=='待访问' ||checkstatus(index)=='已到达'|| checkstatus(index)=='已到达'||checkstatus(index)=='访问中'" @click="gomeeting_code(item)" >出示二维码</button> -->
						
						<!-- <i class="cc-icon"><i class="cc-icon-del"></i><text :class="[checkstatusclass(index) ? 'cc-success-status' : 'cc-wrong-status']">{{checkstatus(index)}}</text></i> -->
					</view>
				</view>
				
				
			</view>
			</view>
			</mescroll-uni>
			
			<!-- <view class="an-userInfo">
				<view class="an-user-image"><image style="width: 60px; height: 60px; background-color: #eeeeee;" mode="aspectFit" :src="userSrc" @error="imageError"></image></view>
				<view class="an-user-text">
					<view style="color: black;">
						<h3>张大大 </h3>
						<p>访客电话：</p>
						<p>到访公司：</p>
						<p>到访部门：</p>
						<p>到访人：</p>
						<p>预约时间：</p>
						<p>到访位置：</p>
						
					</view>
					
				</view>
				<view class="cc-view">
					<button class="cc">待访问</button>
					<view class="phone-number">
						15398886988
					</view>
					<view class="host-company">
						中山市科技有限公司
					</view>
					<view class="host-department">
						销售部
					</view>
					<view class="interviewee">
						李晓东
					</view>
					<view class="ontime">
						2019-12-30 14:20:01
					</view>
					<view class="location-visited">
						A栋3楼
					</view>
					<view class="details">
						详情
					</view>
				</view>
				
			</view> -->
			
		</view>

		<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='main'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import defaultImg from '@/static/img/userImg.jpg';
import {usergetlist,userindex_info} from "@/common/api/user.js"
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {timestampToTime} from "@/common/common.js";
import {appointmentgetlist} from "@/common/api/appointment.js"
export default {
	mixins: [MescrollMixin], // 使用mixin
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	data() {
		return {
			userSrc: defaultImg,
			grids: [],
			type:"",
			page:1,
			pageSize:10,
			requestchanger:true,
			downOption:{
				auto: false
			},
			upOption:{
				auto:false
			},
		};
	},
	onLoad(event) {
		this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
		// try {
		// 	this.detaildata = JSON.parse(decodeURIComponent(event.detaildata));
		// 	console.log(this.detaildata);
		// } catch (error) {
		// 	this.detaildata = JSON.parse(event.detaildata);
		// 	console.log(this.detaildata);
		// }
		if(event.type){
			this.type = event.type;			
		}
	
		
		this.ladingdata();
	},
	onShow() {
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		// this.grids = [];
		// if (!this.hasLogin) {
		// 	this.bindLogin();
		// } else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
		// 	this.grids = icoList;
		// } else {
		// 	this.grids.push(icoList[0]);
		// 	this.grids.push(icoList[1]);
		// }
	},
	methods: {
		retime(val){
			return timestampToTime(val)
		},
		backRefresh(type){ //返回刷新带参数
			this.page=1;
			this.grids=[];
			this.ladingdata();	
		},
		
		/*下拉刷新的回调*/
			downCallback(){
				this.page=1;
				this.grids=[];
				this.ladingdata();		
			
			},
		/*上拉加载的回调*/
			upCallback(page) {
				console.log(page)
				this.mescroll.endSuccess(this.grids.length, this.requestchanger);
				this.page++;
				this.ladingdata();	
			// 与 mescroll-body 的处理方式一致 > 
			},
		ladingdata(){
			if(this.type=='3'){
				appointmentgetlist({
					'page':this.page,
					 type:'viss',
					'pagesize':this.pageSize
				}).then(res=>{
					if(res.data.code == 400){
						return
					}
					// this.visiterlist = res.data.data
				this.page++
				for (let i = 0; i < res.data.data.length; i++) {
					this.grids.push(res.data.data[i])
				}
				})
			}else{
				var getdata ={
					'Uid':this.userid,
					'uid':this.userid,
					'page':this.page,
					'pagesize':this.pageSize
				
				}
				userindex_info(getdata).then(res=>{
					// this.grids = res.data.data
					if(res.data.code==400){
						this.requestchanger = false
						return
						}
					console.log(res)
						
						if(this.type=='1'){
							var newResult=res.data.data_arrive
						}else if(this.type=='2'){
							var newResult=res.data.data_noarrive
						}else if(this.type=='3'){
							var newResult=res.data.data_auditing
						}
						
						// this.getlist=res.data.data;
						this.mescroll.endSuccess();
						 if (newResult.length == 0 || newResult.length < 10) {
							 this.allLoaded = true;
						 }
						 if (this.page != 1) {
							 newResult = this.getlist.concat(newResult);
						 }
						 
						 this.grids = newResult;
					
				})
			}
			
			
		},
		details(item){
			// uni.navigateTo({
			// 	url: './recordDetails'
			// });
			console.log(item)
			if(this.type=='3'){
				uni.navigateTo({
					url: '/pages/user/visitorauditDetails'+'?visitorinfo='+JSON.stringify(item)
				});
			}else{
				if(item.auditing == 0 ){
					var stype = 3
				}else{
					var stype = 2
				}
				let detail = {
					/*邀请id-showtype=审核---appinfo--邀请信息*/
					id: item.appointmentid,
					meetingid:item.id,
					showtype:stype,
					appinfo:item
				};
				uni.navigateTo({
					url: './recordDetails?detaildata=' + encodeURIComponent(JSON.stringify(detail))
				});		
			}
			
		},
		...mapMutations(['logout']),
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		}
	}
};
</script>

<style lang="scss">
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: auto;
	padding: 0px 0px 0px 0px;
	margin-left: 10px;
	
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
	//color: white;
}
.cc{
	//background: #007aff;
	// color: #000;
	margin-right: 0px;
}
.an-userInfo{
	background: white;
	padding-top: 10px;
	padding-right: 20upx;
}
.an-user-image{
	margin-top: 5px;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
	.cc-icon{
		position: absolute;
		display: inline-block;
		height:100px;
		width: 100px;
		top: 20%;
		right: 0;
		opacity: 0.4;
		text{
				text-align: center;
			    position: relative;
			    display: block;
			    top: -74px;
			    rotate: -30deg;
				font-size: 14px;
				letter-spacing:8px;
				font-weight: bold;
				// opacity: 0.6;
		}
	}
}
.cc2{
	background: #ED6C19;
	color: white;
	margin-right: 10px;
	float: right;
	width: 100px;
}
.details{
	width: 77px;
		height: 30px;
		color:#fff;
		background: #007aff;
		border-radius: 18px;
		font-size: 15px;
		line-height: 30px;
		text-align: center;
		margin-left: auto;
		margin-top: 5px;
		margin-bottom: 5px;
}

.an-user-text1{
	margin-top: 5px;
	left: 19%;
}
.an-user-text1{
	position: relative;
	width: 80%;
	// margin-bottom: 10px;
}
</style>